<template>
	<div>
		姓氏 <input type="text" v-model="xing"> <br>
		名字 <input type="text" v-model="ming"> <br>
		全名 <input type="text"> <br>
		{{ xing[0].toUpperCase() + xing.slice(1) + ming }} <br>
		不能改变的 {{ c }} <br>
		能改变的 {{ quan }}
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'

let xing = ref("wang")
let ming = ref("")
// 计算属性,根据已有的属性的变化,形成一个新的属性 
let c = xing.value[0].toUpperCase() + xing.value.slice(1) + ming.value
let quan = computed({
	// get:function () {
	// 	return xing.value[0].toUpperCase() + xing.value.slice(1) + ming.value
	// }
	// get: ()=> {
	// 	return xing.value[0].toUpperCase() + xing.value.slice(1) + ming.value
	// }
	set (val) {
		console.log(val);
		xing.value = val.slice(0,2)
	},
	get () {
		return xing.value[0].toUpperCase() + xing.value.slice(1) + ming.value
	}
})

quan.value = "li-思"







</script>

<style  scoped></style>